<template>
  <div>
    <div class="header">
      <span :class="{'active': obj.isActive==1}" @click="onClickActive(1)">课程信息</span>
      <span :class="{'active': obj.isActive==2}" @click="onClickActive(2)">单元信息</span>
      <span :class="{'active': obj.isActive==3}" @click="onClickActive(3)">课时信息</span>
    </div>
    <div class="content">
      <keep-alive>
        <tab1 v-if="obj.isActive==1" @onClickHandle="onClickHandle()"></tab1>
      </keep-alive>
      <component v-if="obj.isActive!=1" v-bind:is="tabs" @onClickHandle="onClickHandle()"></component>
    </div>
  </div>
</template>
<script>
import tab1 from './tab/tab1'
import tab2 from './tab/tab2'
import tab3 from './tab/tab3'
  export default {
    data() {
      return {
        obj:{
          isActive:1
        },
        tabs:''
      }
    },
    components:{
      tab1,
      tab2,
      tab3
    },
    watch:{
      '$route.path':function(val){
        console.log(val)
        // this.isActive=this.$route.query
      }
    },
    methods: {
     onClickActive(index){
       this.obj.isActive=index
       this.$router.push(    
        {
          path: this.$route.path,
          query: {id: index}
        }
      )
       if(index!=1){
         this.tabs='tab'+(this.obj.isActive)
       }
     },
     onClickHandle(){
       this.$router.push(    
        {
          path: this.$route.path,
          query: {id: this.obj.isActive++}
        }
      )
       if(this.obj.isActive!=1){
         this.tabs='tab'+(this.obj.isActive)
       }
     }
    
    }
  };
</script>
<style scoped>
  .header span{
    display: inline-block;
    padding:10px;
    border:#000 solid 1px;
    border-radius: 50%;
    text-align: center;
    margin-right:40px;
  }
  .active{
    color:red
  }
  .content{
    padding:20px;
  }
  .box-flex{display: flex;align-items: center;margin-bottom:20px;}
  .label{margin-right:10px;min-width:80px;}
</style>